

define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'echarts', 'echarts-theme', 'bootstrap-daterangepicker',], function ($, undefined, Backend, Table, Form, Echarts) {
    var Controller = {
        index: function () {
            
           


            $("#reportrange").daterangepicker({
                timePicker: true, // 启用时间选择
                timePickerSeconds: true, // 启用秒选择
                autoUpdateInput: false, // 自动更新输入框值
                locale: {
                    format: 'YYYY-MM-DD HH:mm:ss', // 日期时间格式
                    customRangeLabel: "自定义",
                    applyLabel: "确认",
                    cancelLabel: "重置"
                },
                ranges: {
                    '今天': [Moment().startOf('day'), Moment().endOf('day')],
                    '昨天': [Moment().subtract(1, 'days').startOf('day'), Moment().subtract(1, 'days').endOf('day')],
                    '最近7天': [Moment().subtract(6, 'days').startOf('day'), Moment().endOf('day')],
                    '最近30天': [Moment().subtract(29, 'days').startOf('day'), Moment().endOf('day')],
                    '本月': [Moment().startOf('month'), Moment().endOf('month')],
                    '上月': [Moment().subtract(1, 'month').startOf('month'), Moment().subtract(1, 'month').endOf('month')]
                }
            });

           
           // $('#reportrange span').html(Moment().startOf('day').format('YYYY-MM-DD HH:mm:ss') + ' - ' + Moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'));

            // 监听选择事件
            $('#reportrange').on('apply.daterangepicker', function (ev, picker) {
                console.log(picker);
                $('#reportrange span').html(picker.startDate.format('YYYY-MM-DD HH:mm:ss') + ' - ' + picker.endDate.format('YYYY-MM-DD HH:mm:ss'));
                // $(this).val(picker.startDate.format('YYYY-MM-DD HH:mm:ss') + ' - ' + picker.endDate.format('YYYY-MM-DD HH:mm:ss'));

                $('#s001').val(picker.startDate.format('YYYY-MM-DD HH:mm:ss'));
                $('#s002').val(picker.endDate.format('YYYY-MM-DD HH:mm:ss'));


            });

            $('#reportrange').on('cancel.daterangepicker', function (ev, picker) {
                console.log(picker);
 
                $('#reportrange span').html(Moment().startOf('day').format('YYYY-MM-DD HH:mm:ss') + ' - ' + Moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'));
            });


            //订单
            var myOrderChart = Echarts.init(document.getElementById('order'));
            var orderOption = {

                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['商品订单', '服务订单', '卡项订单'],
                    bottom: 0,
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: Config.column
                    //data: ['02-02', '02-03', '02-04', '02-05', '02-06', '02-07', '02-08']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '商品订单',
                        type: 'line',
                        //data: [120, 132, 101, 134, 90, 230, 210],
                        data: Config.orderdata,
                        itemStyle: {
                            color: '#dcab83'
                        }
                    },
                    {
                        name: '服务订单',
                        type: 'line',
                        //data: [300, 500, 400, 450, 474, 480, 410],
                        data: Config.orderdata2,
                        itemStyle: {
                            color: '#e8cd8c'
                        }
                    },
                    {
                        name: '卡项订单',
                        type: 'line',
                       // data: [400, 600, 430, 480, 500, 550, 650],
                       data: Config.orderdata3,
                        itemStyle: {
                            color: '#da7a5f'
                        }
                    },

                ]
            };
            myOrderChart.setOption(orderOption);
            //销售
            var mySaleChart = Echarts.init(document.getElementById('sale'));
            var saleOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['商品金额', '服务金额', '卡项金额'],
                    bottom: 0 // 放置在底部
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    //data: ['02-02', '02-03', '02-04', '02-05', '02-06', '02-07', '02-08'],
                    data: Config.column,
                    axisLabel: {
                        interval: 0, // 强制显示所有标签
                        rotate: 30  // 旋转标签，防止过长
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '商品金额',
                        type: 'bar',
                       // data: [120, 132, 101, 134, 90, 230, 210],
                        data: Config.order_sdata,
                        itemStyle: {
                            color: '#2478f2'
                        }
                    },
                    {
                        name: '服务金额',
                        type: 'bar',
                       // data: [220, 182, 191, 234, 290, 330, 310],
                       data: Config.order_sdata2,
                        itemStyle: {
                            color: '#84b7f9'
                        }
                    },
                    {
                        name: '卡项金额',
                        type: 'bar',
                       // data: [150, 232, 201, 154, 190, 330, 410],
                       data: Config.order_sdata3,
                        itemStyle: {
                            color: '#5f9cf8'
                        }
                    }
                ]
            };
            mySaleChart.setOption(saleOption);
            //用户会员
            var myUserChart = Echarts.init(document.getElementById('user'));
            var userOption = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['访客数', '新增会员', '下单数'],
                    bottom: 0 // 放置在底部
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    //data: ['02-02', '02-03', '02-04', '02-05', '02-06', '02-07', '02-08'],
                    data: Config.column,
                    axisLabel: {
                        interval: 0, // 强制显示所有标签
                        rotate: 30  // 旋转标签，防止过长
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '访客数',
                        type: 'line',
                        smooth: true,
                       // data: [820, 932, 901, 934, 1290, 1330, 1320],
                       data: Config.orderdata5,
                        itemStyle: {
                            color: '#6aae6d' // 自定义颜色
                        },
                        areaStyle: {
                            color: '#deedde' // 背景色
                        }
                    },
                    {
                        name: '新增会员',
                        type: 'line',
                        smooth: true,
                        //data: [620, 732, 701, 734, 1090, 1130, 1120],
                        data: Config.userdata,
                        itemStyle: {
                            color: '#9cd1d8' // 自定义颜色
                        },
                        areaStyle: {
                            color: '#e1f1f3' // 背景色
                        }
                    },
                    {
                        name: '下单数',
                        type: 'line',
                        smooth: true,
                       // data: [450, 632, 501, 634, 890, 930, 920],
                       data: Config.orderdata4,
                        itemStyle: {
                            color: '#84abf1' // 自定义颜色
                        },
                        areaStyle: {
                            color: '#dce7fb' // 背景色
                        }
                    }
                ]
            };
            myUserChart.setOption(userOption);
            //交易分析
            var myTradeChart = Echarts.init(document.getElementById('ranking'));
            var tradeOption = {
                color: ['#4f86eb', '#68bbc4', '#57a45b', '#96CEB4', '#FFEEAD'],
                title: {
                    text: '实收方式按金额占比',
                    left: '10%',
                    textStyle: {
                        fontSize: 18,
                        color: '#333',
                        align: 'left'
                    }
                },
                tooltip: {
                    trigger: 'item', // 或 'axis'
                    axisPointer: { type: 'shadow' } // 坐标轴指示器样式
                },
                legend: {
                    orient: 'vertical',
                    left: '10%',
                    top: '20%',        // 标题下方20%位置
                    itemGap: 20,
                    // data: ['景珍支付', '现金(记账)', '余额支付'],
                    textStyle: {
                        color: '#666'
                    }
                },
                series: [{
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['60%', '50%'],
                    label: { show: false },
                    labelLine: { show: false },
                    // data: [
                    //     { value: 22215.00, name: '景珍支付' },
                    //     { value: 1658.00, name: '现金(记账)' },
                    //     { value: 160.00, name: '余额支付' }
                    // ],
                    data: Config.i_9,
                }]
            };
            myTradeChart.setOption(tradeOption);
            //开卡充值
            var myCardChart = Echarts.init(document.getElementById('openCard'));
            var cardOption  = {
                color: ['#4f86eb', '#68bbc4', '#57a45b', '#96CEB4', '#FFEEAD'],
                tooltip: {
                    trigger: 'item', // 或 'axis'
                    axisPointer: { type: 'shadow' } // 坐标轴指示器样式
                },
                legend: {
                    orient: 'vertical',
                    left: '10%',
                    top: '20%',        // 标题下方20%位置
                    itemGap: 20,
                    // data: ['景珍支付', '现金(记账)', '余额支付'],
                    textStyle: {
                        color: '#666'
                    }
                },
                series: [{
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['60%', '50%'],
                    label: { show: false },
                    labelLine: { show: false },
                    // data: [
                    //     { value: 22215.00, name: '充值卡' },
                    //     { value: 1658.00, name: '次卡' },
                    //     { value: 160.00, name: '折扣卡' }
                    // ],
                    data: Config.i_12
                }]
            };
            myCardChart.setOption(cardOption);



        }
    };
    return Controller;
});